<script setup lang="ts">
import {defineProps, onMounted} from 'vue'
import * as echarts from 'echarts';

const props = defineProps({
  chartData: {
    type: Object,
  },
  idx: {
    type: Number,
  },
})
let myChart: any = null
onMounted(() => {

  const chartDom = document.createElement('div');
  chartDom.id = `line-chart-${props.idx}`;
  chartDom.style.width = '428px';
  chartDom.style.height = '220px';

  const container = document.querySelector(`.line-chart-box-${props.idx}`);
  if (container) {
    container.appendChild(chartDom);
  }
  if (myChart) {
    myChart.dispose();
  }
  myChart = echarts.init(chartDom);
  const series = props.chartData.ydata?.map(item => {
    return {
      name: item.name,
      type: 'line',
      data: item.data,
    }
  });

  const option = {
    tooltip: {
      trigger: 'axis'
    },
    // legend: {
    //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    // },
    textStyle: {
      color: '#fff'
    },
    grid: {
      left: '3%',
      right: '3%',
      top: '3%',
      bottom: '6%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.chartData.xdata
    },
    yAxis: {
      type: 'value'
    },
    series: series
  };

  option && myChart.setOption(option);

})
</script>

<template>
  <div :class="'line-chart-box-'+props.idx">
  </div>
</template>